import { watch, reactive, ref } from 'vue'
export default class Test {
  constructor() {
    this.a = 0
    this.b = 0
    this.page = ref(0)
    this.list = reactive([])
    let obj = new TestInner()
    console.log(obj)
    this.list.push(new TestInner())
    this.list.push(new TestInner())
    this.list.push(new TestInner())

    watch(this.list, (res) => {
      console.log(`修改了list`)
      this.changeB()
    })
    watch(
      () => this.list,
      (res) => {
        console.log(`computed 监听版本`)
      }
      //{
      //deep: true
      //}
    )
  }
  toJSON() {
    console.log(this.page, this.page.value, 'page')
    return {
      page: this.page
    }
  }
  add() {
    this.list.push(new TestInner())
  }
  changeB() {
    this.b++
  }
}

class TestInner {
  constructor() {
    this.b = 999
    this.list2 = []
    watch(this.list2, () => {
      console.log(`修改了list2`)
      this.b++
    })
  }
  add2() {
    this.list2.push(new Date())
  }
}

export class Test2 {
  constructor() {
    this.page = ref(0)
  }
  toJSON() {
    return {
      page: this.page,
      page_value: this.page.value
    }
  }
}
